<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="./kuangjia-bootstrap.css" />
		<title></title>
		<style>
			*{margin:0;padding:0;}
		#box{
			width: 95%;
			height: 100%;
			margin:0 auto;
		}
		#box h3{
			border-bottom: 1px solid #999;
			padding-bottom: 15px;
		}
		#template{
			display: none;
		}
		.mask{
			width: 100%;
			height:100%;
			position: fixed;
			top:0;
			left:0;
			background: rgba(0,0,0,.5);
			display: none;
		}
		.container{
			width: 500px;
			padding:20px 20px;
			border-radius: 10px;
			background: #fff;
			position: fixed;
			left:50%;
			top:50%;
			transform: translate(-50%,-50%);
		}
		.radio-inline{
			padding-left: 20px;
		}
		#inlineCheckbox1{
			margin-left: 30px;
		}
		#inlineCheckbox2{
			margin-left: 40px;
		}
		.select{
			margin-left: 25px;
		}
		.add,.cancel{
			margin-top: 20px;
		}
		.cancel{
			margin-right: 20px;
		}
	</style>
	</head>
	<body>

		<div id="box">
			<div class="mask">
				<div class="container">
					<h4>添加学生</h4>
					<form class="form-horizontal">
						<div class="form-group">
							<label for="students-name" class="col-sm-2 control-label">姓名:</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="students-name" placeholder="姓名">
							</div>
						</div>
							<div class="form-group">
								<label for="students-age" class="col-sm-2 control-label">年龄:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="students-age" placeholder="年龄">
								</div>
							</div>
							<div class="select">
								<select id="province">
								</select>
								<select id="city">
								</select>
								<select id="area">
								</select>
							</div>
							<label class="radio-inline">
							 性别:<input type="radio" name="person" id="inlineCheckbox1" value="option1" class="boy" checked> 男
							</label>
							<label class="radio-inline">
							  <input type="radio" name="person" id="inlineCheckbox2" value="option2" class="girl" > 女
							</label>
								
				</form>
				
				<div class="form-group">
					<label for="students-jointime" class="col-sm-2 control-label"style="padding-left:1px;margin-top:15px">入学时间:</label>
					<div class="col-sm-10" style="margin-top:10px">
						<input type="text" class="form-control" id="students-jointime" onclick="WdatePicker();" placeholder="入学时间">
					</div>
				</div>
				<button type="button" class="btn btn-primary add" style="float:right;">确定添加</button>
				<button type="button" class="btn btn-primary cancel" style="float:right;">取消</button>
			</div>
		</div>
		<h3>学生信息管理系统</h3>
		<button class="btn btn-primary insert" style="position: absolute;right:30px;">添加</button>
		<table class="table">
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>城市</th>
					<th>入学时间</th>
				</tr>
			</thead>
			<tbody class="tbody">
				<tr id="template">
					<td class="data-id">学号</td>
					<td class="data-name"></td>
					<td class="data-age"></td>
					<td class="data-sex"></td>
					<td class="data-city"></td>
					<td class="data-jointime"></td>
					<td>
						<button type="button" class="btn btn-primary write">编辑</button>
						<button type="button" class="btn btn-danger delete">删除</button>
					</td>
				</tr>
			</tbody>

		</table>
		</div>
		<script type="text/javascript" src="jquery.min.js">
		</script>
		<script src="citys.js"></script>
		<script src="datepicker/WdatePicker.js"></script>
		<script>
			//调用日期选择(用行内样式调用)
			// $("#students-jointime").click(function(){
			// 	WdatePicker()
			// })
			
			let province=$("#province");
			let city=$("#city");
			let area=$("#area");
			// console.log(citys)
			for(let i=0;i<citys.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${citys[i].provinceName}</option>`;
				province.append(option);
			}
			let mallCityList=citys[0].mallCityList;//在省份下找到对应的市
			for(let i=0;i<mallCityList.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${mallCityList[i].cityName}</option>`;
				city.append(option);
			}
			let mallAreaList=citys[0].mallCityList[0].mallAreaList//在市下找到对应的区
			// console.log(mallAreaList)
			for(let i=0;i<mallAreaList.length;i++){
				//自动生成option标签，将省份插入到option中
				let option=`<option>${mallAreaList[i].areaName}</option>`;
				area.append(option);
			}
			
			//实现点击对应的省份和市区也随之动态改变;
			province.change(function(){
				updataCity.call(this)//先要确定this的正确指向
				updataArea.call(city[0]);//确定刚进入页面时当前的显示
			})
			//实现点击对应的市区随之动态改变
			city.change(function(){
				updataArea.call(this);
			})
			//更新市
			function updataCity(){
				//先把内容清空防止追加
				city.html("");
				 cityList=citys[this.selectedIndex].mallCityList;//通过selectedIndex属性找到当前省份下的所有市
				for(let i=0;i<cityList.length;i++){
					// console.log(cityList[i])
					let option=`<option>${cityList[i].cityName}</option>`;
					city.append(option);
				}
			}
			//更新区
			function updataArea(){
				area.html("");
				arealist=cityList[this.selectedIndex].mallAreaList;
				// console.log(arealist)
				for(let i=0;i<arealist.length;i++){
					let option=`<option>${arealist[i].areaName}</option>`;
					area.append(option);
					}
			}
			let template = $("#template");
			let tbody = $(".tbody");
			//向后端发送ajax请求
			let address = "http://10.35.170.125:81";
			$.ajax({
				url: `${address}/getstudent`,
				success(data) {
					// console.log(data);
					data.forEach(item => {
						//先克隆
						let newtemplate = template.clone(true);
						newtemplate.attr("id", "");
						newtemplate.find(".data-id").html(item.id)
						newtemplate.find(".data-name").html(item.name)
						newtemplate.find(".data-age").html(item.age)
						newtemplate.find(".data-sex").html(item.sex ?"男":"女")
						newtemplate.find(".data-city").html(item.city)
						newtemplate.find(".data-jointime").html(item.data)
						newtemplate.appendTo(tbody);
					});
				}

			})
			//实现删除功能
			$(".delete").click(function() {
				//声明一个变量确定this的正确指向
				let this1 = $(this).closest("tr")
				// console.log(this)
				$.ajax({
					url: `${address}/deletestudent`,
					data: {
						id: $(this).closest("tr").find(".data-id").html(),
					},
					success(data) {
						if (data == "success") {
							console.log("删除成功");
							this1.remove();
						} else {
							console.log("删除失败");
						}
					}
				});
			})
			//实现添加功能
			$(".insert").click(function(){
				$(".mask").fadeIn();
					//点击确认添加时将其加入
					$(".add").click(function(){
						if($("#students-name").val() && $("#students-age").val() && $("#students-jointime").val()){
						$.ajax({
						url:`${address}/addstudent`,
							data:{
								name:$("#students-name").val(),
								age:$("#students-age").val(),
								sex:$(".boy")[0].checked ? 1: 0,
								city:$("#province").val()+$("#city").val()+$("#area").val(),
								data:$("#students-jointime").val()
							},
							
							success(data) {
								console.log(data)
								if (data == "success") {
									console.log("添加学生成功");
									history.go(0);
									$(".mask").fadeOut();
								} else {
									console.log("添加学生失败");
								}
							}
						});	
						}
					})
					
				$(".cancel").click(function(){
					$(".mask").fadeOut();
				})
			})
			//实现编辑功能
			$(".write").click(function(){
				$(".mask").fadeIn();
				let id=$(this).closest("tr").find(".data-id").html();
				let name=$(this).closest("tr").find(".data-name").html();
				let age=$(this).closest("tr").find(".data-age").html();
				let sex=$(this).closest("tr").find(".data-sex").html();
				let data=$(this).closest("tr").find(".data-jointime").html();
				
				$("#students-name").val(name);
				$("#students-age").val(age);
				$("#students-sex").val(sex);
				$("#students-jointime").val(data);
				$(".add").click(function(){
				$.ajax({
					url:`${address}/writestudent`,
					data:{
						id:id,
						name:$("#students-name").val(),
						age:$("#students-age").val(),
						sex:$(".boy")[0].checked ? 1:0,
						city:$("#province").val()+$("#city").val()+$("#area").val(),
						data:$("#students-jointime").val()
					},
					success(data){
						if (data == "success") {
							console.log("修改学生成功");
							history.go(0);
							$(".mask").fadeOut();
						} else {
							console.log("修改学生失败");
						}
					}
				});
				})
				$(".cancel").click(function(){
					$(".mask").fadeOut();
				})
			})
		</script>
	</body>
</html>
